<template>
  <a-flex style="height: 100%" gap="middle">
    <a-flex flex="1">
      <!-- 左侧输入区域 -->
      <a-card title="二维码生成器" style="width: 100%">
        <a-form :model="formState" layout="vertical">
          <a-form-item label="二维码内容">
            <a-textarea
              :status="formState.qrContent ? '' : 'error'"
              style="height: 120px; width: 100%; resize: none !important"
              v-model:value="formState.qrContent"
              placeholder="请输入二维码内容"
            />
          </a-form-item>
          <a-form-item label="错误校正级别">
            <a-select v-model:value="formState.qrOptions.errorCorrectionLevel">
              <a-select-option value="L">L - 7%</a-select-option>
              <a-select-option value="M">M - 15%</a-select-option>
              <a-select-option value="Q">Q - 25%</a-select-option>
              <a-select-option value="H">H - 30%</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="边距">
            <a-input-number v-model:value="formState.qrOptions.margin" :min="0" />
          </a-form-item>
          <a-form-item label="前景色">
            <a-input v-model:value="formState.qrOptions.color.dark" type="color" />
          </a-form-item>
          <a-form-item label="背景色">
            <a-input v-model:value="formState.qrOptions.color.light" type="color" />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" :disabled="!formState.qrContent" @click="generateQRCode">生成二维码</a-button>
          </a-form-item>
        </a-form>
      </a-card>
    </a-flex>
    <!-- 右侧二维码展示区域 -->
    <a-flex style="height: 450px">
      <a-card style="width: 100%" title="二维码结果">
        <a-flex vertical="true" gap="middle">
          <a-dropdown :trigger="['contextmenu']" v-model:visible="contextMenuVisible">
            <div class="qrCodeBox" v-if="qrCodeUrl">
              <img
                :src="qrCodeUrl"
                alt="二维码"
                ref="qrImage"
                @contextmenu.prevent="handleContextMenu"
                style="width: 300px; height: 300px"
              />
            </div>
            <template #overlay>
              <a-menu>
                <a-menu-item @click="copyImage">复制图片</a-menu-item>
                <a-menu-item @click="saveImage">另存为</a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
          <a-flex gap="middle">
            <a-button type="primary" @click="copyImage" danger>复制</a-button>
            <a-button type="primary" @click="saveImage">另存为</a-button>
          </a-flex>
        </a-flex>
      </a-card>
    </a-flex>
  </a-flex>
</template>

<script>
import QRCode from 'qrcode'
import { defineComponent, onMounted, reactive, ref } from 'vue'

export default defineComponent({
  setup() {
    const formState = reactive({
      qrContent: 'https://gitee.com/helloSk/electron-vite-vue-ant-tool',
      qrOptions: {
        errorCorrectionLevel: 'H',
        type: 'image/png',
        quality: 0.92,
        margin: 1,
        color: {
          dark: '#191818',
          light: '#ffffff'
        }
      }
    })

    const qrCodeUrl = ref('')
    const contextMenuVisible = ref(false)

    const generateQRCode = () => {
      if (!formState.qrContent) {
        // alert('请输入二维码内容');
        return
      }

      QRCode.toDataURL(formState.qrContent, formState.qrOptions)
        .then((url) => {
          qrCodeUrl.value = url
        })
        .catch((err) => {
          console.error('生成二维码失败:', err)
        })
    }

    const handleContextMenu = () => {
      contextMenuVisible.value = true
    }

    const copyImage = () => {
      const canvas = document.createElement('canvas')
      const img = new Image()
      img.src = qrCodeUrl.value
      img.onload = () => {
        canvas.width = img.width
        canvas.height = img.height
        canvas.getContext('2d').drawImage(img, 0, 0)
        canvas.toBlob((blob) => {
          navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })])
          alert('图片已复制到剪贴板')
        })
      }
    }

    const saveImage = () => {
      const link = document.createElement('a')
      link.href = qrCodeUrl.value
      link.download = 'qr-code.png'
      link.click()
    }

    // 页面加载完成后自动生成二维码
    onMounted(() => {
      generateQRCode()
    })

    return {
      formState,
      qrCodeUrl,
      contextMenuVisible,
      generateQRCode,
      handleContextMenu,
      copyImage,
      saveImage
    }
  }
})
</script>
<style scoped>
.qrCodeBox {
  border: 1px solid #f0f0f0;
}
</style>
